<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>客户线索表</title>
    <script src="../../../static/kaige/js/szload.js"></script>
    <style>
        .unit {
            background-color: #f5f6f9;
            height: 50px;
            line-height: 50px;
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="kaige-body">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">我的看板</li>
        </ul>
        <div class="layui-tab-content" style="height: 100%;">
            <div class="layui-tab-item layui-show">
                <div class="layui-row">
                    <div class="layui-col-sm6">
                        <div class="layui-card">
                            <div class="layui-card-header">销售简报</div>
                            <div class="layui-card-body">
                                <div class="layui-row layui-col-space20">
                                    <div class="layui-col-sm6">
                                        <div class="unit">
                                            <div style="float:left;display: flex">
                                                <i class="layui-icon layui-icon-username"
                                                   style="font-size: 25px; color: #1E9FFF;"></i>
                                                <span style="padding-left:10px;">本周新增客户</span>
                                            </div>
                                            <div style="float:right">
                                                <span style="padding-right: 20px;" id="customer_number">0</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-col-sm6">
                                        <div class="unit">
                                            <div style="float:left;display: flex">
                                                <i class="layui-icon layui-icon-form"
                                                   style="font-size: 25px; color: #1E9FFF;"></i>
                                                <span style="padding-left:10px;">本周跟进记录</span>
                                            </div>
                                            <div style="float:right">
                                                <span style="padding-right: 20px;" id="record_number">0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space20" style="padding-top: 20px;">
                                    <div class="layui-col-sm6">
                                        <div class="unit">
                                            <div style="float:left;display: flex">
                                                <i class="layui-icon layui-icon-link"
                                                   style="font-size: 25px; color: #1E9FFF;"></i>
                                                <span style="padding-left:10px;">本周新增线索</span>
                                            </div>
                                            <div style="float:right">
                                                <span style="padding-right: 20px;" id="clue_number">0</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-col-sm6">
                                        <div class="unit">
                                            <div style="float:left;display: flex">
                                                <i class="layui-icon layui-icon-website"
                                                   style="font-size: 25px; color: #1E9FFF;"></i>
                                                <span style="padding-left:10px;">本周新增公海</span>
                                            </div>
                                            <div style="float:right">
                                                <span style="padding-right: 20px;" id="open_number">0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space20" style="padding-top: 20px;">
                                    <div class="layui-col-sm6">
                                        <div class="unit">
                                            <div style="float:left;display: flex">
                                                <i class="layui-icon layui-icon-file-b"
                                                   style="font-size: 25px; color: #1E9FFF;"></i>
                                                <span style="padding-left:10px;">本周新增合同</span>
                                            </div>
                                            <div style="float:right">
                                                <span style="padding-right: 20px;" id="contract_number">0</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-col-sm6">
                                        <div class="unit">
                                            <div style="float:left;display: flex">
                                                <i class="layui-icon layui-icon-rmb"
                                                   style="font-size: 25px; color: #1E9FFF;"></i>
                                                <span style="padding-left:10px;">本周新增回款</span>
                                            </div>
                                            <div style="float:right">
                                                <span style="padding-right: 20px;" id="receivables_number">0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space20" style="padding-top: 20px;">
                                    <div class="layui-col-sm6">
                                        <div class="unit">
                                            <div style="float:left;display: flex">
                                                <i class="layui-icon layui-icon-edit"
                                                   style="font-size: 25px; color: #1E9FFF;"></i>
                                                <span style="padding-left:10px;">本周已审批</span>
                                            </div>
                                            <div style="float:right">
                                                <span style="padding-right: 20px;" id="approved_number">0</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="layui-col-sm6">
                                        <div class="unit">
                                            <div style="float:left;display: flex">
                                                <i class="layui-icon layui-icon-help"
                                                   style="font-size: 25px; color: #1E9FFF;"></i>
                                                <span style="padding-left:10px;">本周待审批</span>
                                            </div>
                                            <div style="float:right">
                                                <span style="padding-right: 20px;" id="pending_number">0</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="layui-col-sm6">
                        <div class="layui-card">
                            <div class="layui-card-header">回款金额统计</div>
                            <div class="layui-card-body">
                                <div id="mySalesConsole"></div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-sm6">
                        <div class="layui-card">
                            <div class="layui-card-header">客户来源统计</div>
                            <div class="layui-card-body">
                                <div id="mySalesSourceConsole"></div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-col-sm6">
                        <div class="layui-card">
                            <div class="layui-card-header">合同金额统计</div>
                            <div class="layui-card-body">
                                <div id="mySalesContractConsole"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    load_init_js([
        szoapcpath + '/static/kaige/js/date.js',
        szoapcpath + '/static/kaige/js/search.js',
        szoapcpath + '/static/kaige/js/xm-select.js',
        szoapcpath + '/static/kaige/js/echarts-5.33/echarts.min.js'
    ], function () {
        // console.log(echarts);
        layui.config({
            base: szoapcpath + '/static/kaige/layuiextend/'
        }).use(['table'], function () {
            var myChart1 = echarts.init(document.getElementById('mySalesContractConsole'));
            var myChart = echarts.init(document.getElementById('mySalesConsole'));
            var myChart2 = echarts.init(document.getElementById('mySalesSourceConsole'));

            $.post('/crm.console/index', {}, function (res) {
                console.log("1111");
                $.each(res.data,function (index,item) {
                    $("#" + index).text(item);
                })
            });
            $.post('/crm.console/getCustomer', {}, function (res) {
                var option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: Object.values(res.data.source)
                    },
                    xAxis: {type: 'category'},
                    yAxis: {gridIndex: 0},
                    grid: {top: '55%'},
                    series: Object.values(res.data.series)
                };
                myChart2.on('updateAxisPointer', function (event) {
                    const xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        const dimension = xAxisInfo.value + 1;
                        myChart2.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });

                myChart2.setOption(option);
                var width = $("#mySalesSourceConsole").width();
                myChart2.resize({
                    width: width,
                    height: 400
                });
            });


            $.post('/crm.console/getContract', {}, function (res) {
                myChart1.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'cross'}
                    },
                    legend: {
                        data: ['金额', '合同单']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: Object.values(res.data.xAxis)
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            min: 0,
                            max: res.data.max_left,
                            position: 'left',
                            axisLabel: {
                                formatter: '￥ {value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '合同单',
                            min: 0,
                            max: res.data.max_right,
                            position: 'right',
                            axisLabel: {
                                formatter: '{value} 份数'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            yAxisIndex: 0,
                            data: Object.values(res.data.yAxis_left)
                        },
                        {
                            name: '合同单',
                            type: 'line',
                            smooth: true,
                            yAxisIndex: 1,
                            data: Object.values(res.data.yAxis_right)
                        }
                    ]
                });

                var width = $("#mySalesContractConsole").width();
                myChart1.resize({
                    width: width,
                    height: 400
                });
            });

            // 绘制图表
            $.post('/crm.console/getReceivables', {}, function (res) {
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {type: 'cross'}
                    },
                    legend: {
                        data: ['金额', '回款单']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisTick: {
                                alignWithLabel: true
                            },
                            data: Object.values(res.data.xAxis)
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '金额',
                            min: 0,
                            max: res.data.max_left,
                            position: 'left',
                            axisLabel: {
                                formatter: '￥ {value}'
                            }
                        },
                        {
                            type: 'value',
                            name: '回款单',
                            min: 0,
                            max: res.data.max_right,
                            position: 'right',
                            axisLabel: {
                                formatter: '{value} 份数'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '金额',
                            type: 'bar',
                            yAxisIndex: 0,
                            data: Object.values(res.data.yAxis_left)
                        },
                        {
                            name: '回款单',
                            type: 'line',
                            smooth: true,
                            yAxisIndex: 1,
                            data: Object.values(res.data.yAxis_right)
                        }
                    ]
                });

                var width = $("#mySalesConsole").width();
                myChart.resize({
                    width: width,
                    height: 400
                });
            });

        })
    });
</script>
</body>
</html>